<template>
    <div id="box">
        <!-- 轮播图部分 -->
        <swiper>
            <swiper-slide v-for="data in slideShowDatas" :key="data.img">
                <img :src="data.img">
            </swiper-slide>
        </swiper>
        <!-- 商品列表部分 -->
        <van-divider @click="$router.push('/clickList')">更多商品(点击)</van-divider>
        <van-divider @click="$router.push('/pullList')">更多商品(上下拉)</van-divider>
        <van-grid :border="false" :column-num="2">
            <van-grid-item v-for="good in goodsDatas" :key="good.id" @click="$router.push(`/detail?id=${good.id}`)">
                <img v-lazy="good.img_url">
                <span>{{ good.title }}</span>
                <span>{{ good.sell_price }}¥</span>
            </van-grid-item>
            <van-back-top />
        </van-grid>
    </div>
</template>

<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue';
import { getSlideShowDatas, getGoodsDatas } from '../api/home.js'
import 'swiper/css';
import { ref, onMounted } from 'vue'
const slideShowDatas = ref([])
const goodsDatas = ref([])

// 挂载时发起请求获取图片网址的数据
onMounted(() => {
    _getSlideShowDatas()
    _getGoodsDatas()
})

// 构建发送axios请求获取图片数据的函数
const _getSlideShowDatas = async () => {
    let data = await getSlideShowDatas()
    slideShowDatas.value = data.message
}

// 构建发送axios请求获取商品数据的函数
const _getGoodsDatas = async () => {
    let data = await getGoodsDatas()
    goodsDatas.value = data.message
}
</script>

<style lang="scss" scoped>
#box {
    .swiper {
        .swiper-slide {
            img {
                width: 100%;
            }
        }
    }

    .van-grid {
        .van-grid-item {
            img {
                width: 100%;
                height: 200px;
            }

            span {
                width: 100%;
            }
        }
    }

}
</style>